<template>
  <div>
    <a-modal
      width="40%"
      v-model="modal2Visible"
      :title="title"
      centered
      @ok="irrigationGroupBtn"
      :ok-button-props="{ props: submit }"
    >
      <a-spin tip="Loading..." :spinning="spin">
        <a-row>
          <a-col :span="24">
            轮灌组名称：
            <a-input placeholder="轮灌组名称：" v-model="name" style="width: 210px"/>
          </a-col>
          <a-col :span="24" style="margin-top: 20px;">
            <a-transfer
              :titles="['阀门列表', '阀门列表']"
              :data-source="mockData"
              show-search
              :list-style="{
            width: '300px',
            height: '380px',
          }"
              :operations="['右移', '左移']"
              :target-keys="targetKeys"
              :render="item => `${item.title}`"
              @change="handleChange"
            >
              <span slot="notFoundContent">暂无数据</span>
            </a-transfer>
          </a-col>
        </a-row>
      </a-spin>
    </a-modal>
  </div>
</template>
<script>
import {deviceList, irrigationGroup, editListall, edit, statusChange} from '@/api/meteorological'

export default {
  data() {
    return {
      modal2Visible: false,
      mockData: [],
      targetKeys: [],
      name: '',
      id: '',
      title: '新增轮灌组',
      spin: true,
      right: [],
      rights: [],
      left: [],
      lefts: [],
      leftlist: [],
      submit: {disabled: false}
    }
  },
  mounted() {
    // this.getMock()
  },
  methods: {
    editList() {
      editListall(this.id).then(res => {
        this.rights = res.result.deviceIds
        let options = [];
        let times = res.result.deviceIds.split(',');
        let timesDesc = res.result.deviceNames.split(',');
        options = []
        //第二种方案：
        let size = times.length;
        for (let i = 0; i < size; i++) {
          let a = {};
          a.id = times[i];
          a.deviceName = timesDesc[i];
          options.push(a);
        }
        this.getMock(res.result.deviceIds.split(','), options)
        this.spin = false
        this.name = res.result.name

      }).catch(err => {
        this.spin = false
      })
    },
    getMock(list, options) {
      console.log(options)
      const targetKeys = [];
      const mockData = [];
      deviceList().then(res => {
        this.leftlist = res.result.map(item => {
          return item.id
        })
        var all = options == undefined ? res.result : res.result.concat(options)
        this.left = all.map(item => {
          return item.deviceId
        })
        // 合并数组
        for (let i = 0; i < all.length; i++) {
          const data = {
            key: all[i].id.toString(),
            title: all[i].deviceName,
            chosen: list,
          };
          if (data.chosen) {
            for (let i = 0; i < data.chosen.length; i++) {
              targetKeys.push(data.chosen[i]);
            }
          }
          mockData.push(data);
          this.spin = false
        }
        this.mockData = mockData;
        this.targetKeys = targetKeys;

      }).catch(err => {
        this.spin = false
      })
    },
    handleChange(targetKeys, direction, moveKeys) {
      //筛选数据中相同的值
      function getSetArr(arr) {
        return [...new Set(arr)]
      }
      this.right = getSetArr(targetKeys)
      // 将两个数组中相同的值去除
      let array = this.left
      let array1 = this.right
      this.lefts = array.filter(items => {
        if (!array1.includes(items)) return items;
      })
      this.targetKeys = targetKeys
    },
    //  确定
    irrigationGroupBtn() {
      this.submit.disabled = true
      // 提交时判断
      if (this.name === '') {
        return this.$message.warning('请填写轮灌组名称');
      } else if (this.targetKeys.length === 0) {
        return this.$message.warning('请选择阀门列表');
      }
      // 新增

      this.spin = true
      if (this.title === '新增轮灌组') {
        let parameter = {
          name: this.name,
          deviceIds: this.targetKeys.join(',')
        }
        irrigationGroup(parameter).then(res => {
          this.spin = false
          this.$message.success('添加成功');
          this.modal2Visible = false
          this.submit.disabled = false
          this.$parent.dataList()
        })
      } else {
        //  修改
        let data = {
          id: this.id,
          name: this.name,
          deviceIds: this.right == '' ? this.rights : this.right.join(','),
        }
        // let datas = {
        //   statusIds: this.lefts=='' ? this.leftlist.join(',') : this.lefts.join(',')
        // }

        // 修改 轮灌组
        edit(data).then(res => {
          this.$message.success('修改成功');
          this.modal2Visible = false
          this.$parent.dataList()
        }).catch(err => {

        })
      }
    }
  }
}
</script>
<style scoped>
/*/deep/.ant-btn-primary{*/
/*  background: #3C67F1 !important;*/
/*  color: #fff;*/
/*}*/
</style>